import React from 'react';
import { connect } from 'dva';
import { Carousel, Card, Modal } from 'antd';
// import Swiper from 'swiper';
// import 'swiper/dist/css/swiper.min.css';
import BasicInformation from './basicInformation';
import { withRouter } from 'umi';

@withRouter
@connect(
  state => ({
    loadingadd: state.loading.effects['taskMngt/add'],
  }),
  dispatch => ({
    add: e => dispatch({ type: 'taskMngt/add', payload: e }),
  })
)
export default class Add extends React.Component {
  state = {
    modalVisible: false,
  };
  handleModalVisible() {
    if (this.props.disabled) return;
    this.setState(() => ({ modalVisible: !this.state.modalVisible }));
  }
  confirmAdd = () => {
    this.basicInformation.props.form.validateFields((err, values) => {
      if (err) return;
      this.props
        .add({
          ...values,
          executionTime:
            values.executionTime &&
            (values.executionCycleTypeId == 2
              ? values.executionTime.format('YYYY-MM-DD HH:mm:ss')
              : values.executionTime.format('HH:mm')),
          // resAuditTaskUserScopePos: JSON.stringify(
          //   values.resAuditTaskUserScopePos.map(item => JSON.parse(item))
          // ),
          restaskDbGroupPos: JSON.stringify(
            values.restaskDbGroupPos.map(item => JSON.parse(item))
          ),
        })
        .then(res => {
          if (res.rescode == 200) {
            this.handleModalVisible();
            if (values.executionCycleTypeId == 1) {
              this.props.history.push('/taskInfo/taskHistory');
            } else {
              Modal.success({ title: '操作成功' });
              this.props.pageList();
            }
          } else if (res.rescode == 205) {
            Modal.warning({ title: '操作告警', content: res.msg });
          } else {
            Modal.error({ title: '操作失败', content: res.msg });
          }
        });
    });
  };
  render() {
    return (
      <>
        <Modal
          title="创建任务"
          visible={this.state.modalVisible}
          onCancel={() => this.handleModalVisible()}
          destroyOnClose
          maskClosable={false}
          confirmLoading={this.props.loadingadd}
          onOk={this.confirmAdd}
          width={640}
        >
          {/* <Carousel>
          <ChooseAuditTaskType /> */}
          <BasicInformation
            getInstance={childCp => {
              this.basicInformation = childCp;
            }}
          />
          {/* </Carousel> */}
        </Modal>
        <span onClick={() => this.handleModalVisible()}>{this.props.children}</span>
      </>
    );
  }
}

class ChooseAuditTaskType extends React.Component {
  componentDidMount() {
    const swiper = new Swiper('.swiper-container', {
      slidesPerView: 3.5,
    });
  }
  render() {
    return (
      <div className="swiper-container" style={{ width: '75%' }}>
        <div class="swiper-wrapper">
          <div className="swiper-slide">
            <Card
              hoverable
              style={{ width: 200 }}
              cover={
                <img
                  alt="example"
                  src="https://dss1.bdstatic.com/5aAHeD3nKgcUp2HgoI7O1ygwehsv/media/ch1000/png/%E5%AF%BC%E8%88%AAList_%E6%B7%98%E5%AE%9D.png"
                />
              }
            >
              <Card.Meta title="从账号一致性稽核" description="" />
            </Card>
          </div>
          <div className="swiper-slide" style={{ textAlign: 'center' }}>
            <Card
              hoverable
              style={{ width: 200 }}
              cover={
                <img
                  alt="example"
                  src="https://dss1.bdstatic.com/5aAHeD3nKgcUp2HgoI7O1ygwehsv/media/ch1000/png/%E5%AF%BC%E8%88%AAList_%E6%B7%98%E5%AE%9D.png"
                />
              }
            >
              <Card.Meta title="从账号一致性稽核" description="" />
            </Card>
          </div>
          <div className="swiper-slide">
            <Card
              hoverable
              style={{ width: 200 }}
              cover={
                <img
                  alt="example"
                  src="https://dss1.bdstatic.com/5aAHeD3nKgcUp2HgoI7O1ygwehsv/media/ch1000/png/%E5%AF%BC%E8%88%AAList_%E6%B7%98%E5%AE%9D.png"
                />
              }
            >
              <Card.Meta title="从账号一致性稽核" description="" />
            </Card>
          </div>
          <div className="swiper-slide">
            <Card
              hoverable
              style={{ width: 200 }}
              cover={
                <img
                  alt="example"
                  src="https://dss1.bdstatic.com/5aAHeD3nKgcUp2HgoI7O1ygwehsv/media/ch1000/png/%E5%AF%BC%E8%88%AAList_%E6%B7%98%E5%AE%9D.png"
                />
              }
            >
              <Card.Meta title="从账号一致性稽核" description="" />
            </Card>
          </div>
          <div className="swiper-slide">
            <Card
              hoverable
              style={{ width: 200 }}
              cover={
                <img
                  alt="example"
                  src="https://dss1.bdstatic.com/5aAHeD3nKgcUp2HgoI7O1ygwehsv/media/ch1000/png/%E5%AF%BC%E8%88%AAList_%E6%B7%98%E5%AE%9D.png"
                />
              }
            >
              <Card.Meta title="从账号一致性稽核" description="" />
            </Card>
          </div>
          <div className="swiper-slide">
            <Card
              hoverable
              style={{ width: 200 }}
              cover={
                <img
                  alt="example"
                  src="https://dss1.bdstatic.com/5aAHeD3nKgcUp2HgoI7O1ygwehsv/media/ch1000/png/%E5%AF%BC%E8%88%AAList_%E6%B7%98%E5%AE%9D.png"
                />
              }
            >
              <Card.Meta title="从账号一致性稽核" description="" />
            </Card>
          </div>
        </div>
      </div>
    );
  }
}
